<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ include file="/WEB-INF/tiles2/common.jsp" %>
<div class="page-header">
	<div class="alert alert-info"><h3 class="panel-title">회원가입</h3></div>
</div>
<article >
	<div class="progress joinstep" id="step">
		<div class="progress-bar progress-bar-gray bright" style="width: 25%">
			<h3 class="panel-title dragdown">이용약관</h3>
		</div>
		<div class="progress-bar progress-bar-gray bright" style="width: 25%">
			<h3 class="panel-title dragdown">가입확인</h3>
		</div>
		<div class="progress-bar progress-bar-danger bright" style="width: 25%">
			<h3 class="panel-title dragdown">정보입력</h3>
		</div>
		<div class="progress-bar progress-bar-gray" style="width: 25%">
			<h3 class="panel-title dragdown">가입완료</h3>
		</div>		
	</div>	<!-- 이동 경로 -->	
	<div>
		<form id="joinfrm" class="well form-horizontal" role="form">
			<div class="form-group" id="uidinput">
				<label for="uid" class="col-sm-2 control-label">아이디</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="uid" name="uid" maxlength="16" />
					<span class="glyphicon glyphicon-ok form-control-feedback" id="uidok"></span>
				</div>
				<div class="col-sm-4" id="uidok-p">
					<p class="form-control-static"><strong class="success">사용가능한 아이디 입니다.</strong></p>
				</div>
				<div class="col-sm-4" id="uidno-p">
					<p class="form-control-static"><strong class="danger">사용이 불가능한 아이디 입니다.</strong></p>
				</div>
			</div>
			<div class="form-group">
				<label for="pwd" class="col-sm-2 control-label">비밀번호</label>
				<div class="col-sm-3">
					<input type="password" class="form-control" id="pwd" name="pwd" />
				</div>
			</div>
			<div class="form-group" id="pwdinput">
				<label for="repwd" class="col-sm-2 control-label">비밀번호 확인</label>
				<div class="col-sm-3">
					<input type="password" class="form-control" id="repwd" />
					<span class="glyphicon glyphicon-ok form-control-feedback" id="pwdok"></span>
				</div>
				<div class="col-sm-4" id="pwdlen-p">
					<p class="form-control-static"><strong class="danger">6자이상의 비밀번호를 사용해주세요.</strong></p>
				</div>
				<div class="col-sm-4" id="pwdok-p">
					<p class="form-control-static"><strong class="success">비밀번호가 일치합니다.</strong></p>
				</div>
				<div class="col-sm-4" id="pwdno-p">
					<p class="form-control-static"><strong class="danger">비밀번호가 일치하지 않습니다.</strong></p>
				</div>
			</div>
			<div class="form-group">
				<label for="name" class="col-sm-2 control-label">이름</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="name" name="name" readonly="readonly" value="${param.chkname}" />
				</div>
			</div>
			<div class="form-group">
				<label for="zipcode" class="col-sm-2 control-label">우편번호</label>
				<div class="col-sm-4">
					<div class="input-group">
						<input type="text" id="zip1" class="form-control" maxlength="3" readonly="readonly" />
						<span class="input-group-addon addon-border">
							<span class="glyphicon glyphicon-minus"></span>
						</span>
						<input type="text" id="zip2" class="form-control" maxlength="3" readonly="readonly" />
						<span class="input-group-btn">
							<button class="btn btn-info" data-toggle="modal" data-target="#zipcodemodal" id="zipbtn" type="button">우편번호 찾기</button>
						</span>
					</div>
				</div>				
			</div>
			<div class="form-group">
				<label for="addr" class="col-sm-2 control-label">주소</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" id="addr" name="addr" readonly="readonly" />					
				</div>
			</div>
			<div class="form-group">
				<label for="ettcaddr" class="col-sm-2 control-label">나머지 주소</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" id="etcaddr" name="etcaddr" />					
				</div>
			</div>
			<div class="form-group">
				<label for="email1" class="col-sm-2 control-label">전자우편 주소</label>
				<div class="col-sm-6">
					<div class="input-group">
						<input type="text" name="email1" id="email1" class="form-control" value="${param.email1}" />
						<span class="input-group-addon addon-border">@</span>
						<input type="text" name="email2" id="email2" class="form-control" readonly="readonly" value="${param.email2}" />
						<div class="input-group-btn">
							<select id="email3" class="btn btn-info addon-select">
								<option>선택하세요</option>
								<option value="manual">직접입력</option>
								<option>gmail.com</option>
								<option>naver.com</option>
								<option>hanmail.net</option>
								<option>nate.com</option>
							</select>
						</div>		
					</div>
				</div>
			</div> <!-- 전자우편 주소 -->
			<div class="form-group">
				<label for="hp1" class="col-sm-2 control-label">핸드폰</label>
				<div class="col-sm-4">
					<div class="input-group">
						<div class="input-group-btn">
							<select name="hp1" id="hp1" class="btn btn-default addon-select">
								<option>국번</option>
								<option>010</option>
								<option>011</option>
								<option>016</option>
								<option>018</option>
								<option>017</option>
								<option>019</option>
							</select>
						</div>						
					<input type="text" name="hp2" id="hp2" class="form-control" maxlength="4" />
					<span class="input-group-addon addon-border">
						<span class="glyphicon glyphicon-minus"></span>
					</span>
					<input type="text" name="hp3" id="hp3" class="form-control" maxlength="4" />
					</div>
				</div>
			</div> <!-- 개인 연락처 -->
			<div class="form-group">
				<label for="hp1" class="col-sm-2 control-label">자동 가입방지</label>
				<div class="col-sm-4">
					<img src="http://www.captcha.net/images/recaptcha-example.gif" class="captcha">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2"></label>
				<div class="col-sm-4">
					<div class="input-group">							
						<input type="text" name="captcha" class="form-control" id="captcha" />
						<span class="input-group-btn">
							<button class="btn btn-danger" type="button">인증 확인</button>
						</span>
					</div>
				</div>					
			</div> <!-- 자동 가입방지 -->
			<hr />
			<div class="form-group tcenter">
				<button type="button" id="savebtn" class="btn btn-primary btn-lg">입력완료</button>
				<button type="button" id="cancelbtn" class="btn btn-warning btn-lg">취소하기</button>
			</div>
			<input type="hidden" name="zipcode" id="zipcode" />			
			<input type="hidden" name="email" id="email" />
			<input type="hidden" name="hp" id="hp" />
		</form>			
	</div> <!-- 회원가입 -->
	<input type="hidden" id="pwdcheck" value="n" />
</article>

<!-- 우편번호 찾기 모달창 시작 -->
<div class="modal fade" id="zipcodemodal" role="dialog">
	<div class="modal-dialog">
	    <div class="modal-content">	
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h3>우편번호 찾기</h3>			
			</div>
			<div class="modal-body">
				<form name="zipfrm">
					<div class="input-group">
						<input type="text" class="form-control" name="dong" id="dong" />
						<span class="input-group-btn">
							<a class="btn btn-primary" id="zipfindbtn">검색</a>
						</span>
					</div>
					<span class="help-block">지역의 읍/면/동 이름을 공백없이 입력하신 후, [검색]버튼을 클릭하세요</span>
					<div class="tcenter topmargin">
						<select size="10" class="form-control" id="ziplist"></select>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<a class="btn btn-danger" id="sendbtn">선택하고 닫기</a>
			</div>
		</div>
	</div>
</div>
<!-- 우편번호 찾기 모달창 끝 -->

<!-- 스크립트 -->
<script>
	$("#email3").on("change", function(event){
		if ($("#email3").val()!="manual") {
			$("#email2").val($("#email3").val()).attr("readonly", "readonly");
		} else {
			$("#email2").removeAttr("readonly").val("").focus();
		}
	});
	$("#savebtn").on("click", function(event){
		if ($("#uid").val()=="") {
			alert("아이디를 입력하세요");
			$("#uid").focus();
		}
		else if ($("#pwd").val()=="") alert("비밀번호를 입력하세요");
		else if ($.session.get("chkuid")=="n") alert("사용 불가능한 아이디입니다");
		else if ($("#pwdcheck").val()=="n") alert("비밀번호가 일치하지 않습니다");
		else {
			$("#hp").val($("#hp1").val()+"-"+$("#hp2").val()+"-"+$("#hp3").val());
			$("#zipcode").val($("#zip1").val()+"-"+$("#zip2").val());
			$("#email").val($("#email1").val()+"@"+$("#email2").val());
			$("#joinfrm").attr("method", "post").submit();
		}
		
	});
	$("#cancelbtn").on("click", function(event){
		$(location).attr("href", "<c:url value='index.pen' />");
	});
</script>
<script>
	$("#zipfindbtn").click(function(){
		$("#ziplist *").remove();
		var reqAjax = $.ajax({
			type: 'GET',
			url: "<c:url value='/join/zipcode.pen' />",
			data: {dong: $("#dong").val()}
		});
		reqAjax.done(function(result){			
			$(result).appendTo("#ziplist");
		});
		reqAjax.fail(function(xhr, status, err){
			alert(status + "/" + err);
		});		
	});
	$("#sendbtn").click(function(){
		var zip = $("#ziplist").val().split(" ");
		$("#zip1").val(zip[0].split("-")[0]);
		$("#zip2").val(zip[0].split("-")[1]);
		$("#addr").val(zip[1]+" "+zip[2]+" "+zip[3]+" "+zip[4]);
		$("#zipcodemodal").modal('hide');
	});
	$("#zipbtn").click(function(){
		$("#ziplist *").remove();
		$("#dong").val("");
	});
</script>
<script>
	$("#uid").keyup(function(){		
		chkUid();
	});
	$("#pwd").keyup(function(){
		inputChk("#pwd", $("#repwd").val());
	});
	$("#repwd").keyup(function(){
		inputChk("#pwd", $("#repwd").val());
	});
	
	function inputChk(id, idchk){
		if ($(id).val().length < 6) {
			$(id+"input").removeClass("has-error has-feedback has-success has-feedback");
			$(id+"ok").hide();
			$(id+"ok-p").hide();
			$(id+"no-p").hide();
			$(id+"check").val("n");
			$(id+"len-p").show();
		} else if($(id).val()==idchk) {
			$(id+"input").removeClass("has-error has-feedback").addClass("has-success has-feedback");
			$(id+"ok").show().removeClass("glyphicon-remove").addClass("glyphicon-ok");
			$(id+"ok-p").show();
			$(id+"no-p").hide();			
			$(id+"check").val("y");
			$(id+"len-p").hide();
		} else {
			$(id+"input").addClass("has-error has-feedback");
			$(id+"ok").show().removeClass("glyphicon-ok").addClass("glyphicon-remove");
			$(id+"no").show();
			$(id+"ok-p").hide();
			$(id+"no-p").show();
			$(id+"check").val("n");
			$(id+"len-p").hide();
		}
	}
</script>
<script>
	function chkUid() {
		var reqAjax = $.ajax({
			type: 'GET',
			url: "<c:url value='/join/checkuid.pen' />",
			data: {uid: $("#uid").val()}
		});
		reqAjax.done(function(result){			
			if ($("#uid").val()=="") {
				$("#uidinput").removeClass("has-error has-feedback has-success has-feedback");
				$("#uidok").hide();
				$("#uidok-p").hide();
				$("#uidno-p").hide();
				$.session.set("chkuid", "n");
			} else if (result == "y") {
				$("#uidinput").removeClass("has-error has-feedback").addClass("has-success has-feedback");
				$("#uidok").show().removeClass("glyphicon-remove").addClass("glyphicon-ok");
				$("#uidok-p").show();
				$("#uidno-p").hide();
				$.session.set("chkuid", "y");
			} else {
				$("#uidinput").addClass("has-error has-feedback");
				$("#uidok").show().removeClass("glyphicon-ok").addClass("glyphicon-remove");
				$("#uidno").show();
				$("#uidok-p").hide();
				$("#uidno-p").show();
				$.session.set("chkuid", "n");
			}
		});
		reqAjax.fail(function(xhr, status, err){
			alert(status + "/" + err);
		});		
	}
</script>